<script setup>
import { ref, onMounted } from "vue";
defineProps({
    msg: {
        type: String,
        required: true,
    },
    data: {
        type: Object,
        required: false,
        default() {
            return {
                title: "萨尔（江苏）流体工程有限公司",
                infor: "萨尔（SAR）是一家全球领先的工业自动化和技术解决方案提供商，成立于1890年（美国），迄今已有133年的历史。一直致力于为各种行业提供创新的工业解决方案，是工业控制、自动化、制程管理以及流体控制领域的领先企业。艾默生旗下有众多品牌，阀门业务最为大众熟悉的是FISHER品牌，典型的绿色涂装",
                url: "/news/detail",
                bgpic: "../assets/barpi96 4.png",
            };
        },
    },
});
const count = ref(0);
</script>

<template>
    <div
        class="w-full h-auto mobile:h-full mobile:pt-[80px] self-center wen-mobile-down mobile:p-6"
    >
        <div class="flex mb-12 mobile:mb-6">
            <span class="wen-index-title text-8xl mobile:text-5xl">SAR</span>
        </div>
        <div class="flex mobile:block">
            <div
                class="w-full flex-auto wow animate__animated animate__fadeInUp timing"
            >
                <h3
                    class="text-5xl text-dominant mb-10 mobile:mb-6 mobile:text-2xl mobile:leading-snug"
                >
                    <a :href="data.url">{{ data.cn_title }}</a>
                </h3>
                <p
                    class="text-xl leading-10 text-gray3 w-4/5 mobile:w-full line-clamp-6 mobile:text-sm"
                >
                    <a :href="data.url">{{ data.cn_descri }}</a>
                </p>
                <div
                    class="mt-16 text-[28px] mobile:my-8 mobile:text-base mobile:hidden leading-loose flex items-center"
                >
                    <span
                        class="w-16 h-16 mobile:w-8 mobile:h-8 text-center mr-3 inline-block rounded-full bg-dominant text-white"
                        ><span
                            class="pl-1 ilmobile:translate-y-[1px] fa fa-angle-right fa-lg"
                        ></span></span
                    ><span class="text-tblack leading-loose font-bold"
                        >了解萨尔</span
                    >
                </div>
            </div>
            <div
                class="w-full flex-auto wow animate__animated animate__fadeInUp timing"
            >
                <div class="w-full max-w-[524px] end-0 float-right">
                    <div
                        class="w-full rounded-3xl overflow-hidden mb-6 mobile:flex-auto mobile:w-full self-center float-right mobile:hidden"
                    >
                        <img class="w-full" :src="data?.cn_single_pic" />
                    </div>
                    <div
                        class="w-full float-right mobile:flex-auto mobile:w-full mobile:px-0 float-right mobile:flex mobile:my-6"
                    >
                        <p
                            class="border-b border-1 flex mobile:block py-6 mobile:py-1 mobile:flex-auto"
                        >
                            <span
                                class="w-full font-bold inline-block text-dominant mobile:block text-5xl mobile:text-3xl"
                                >{{ data?.num }}+</span
                            ><span
                                class="w-full text-[32px] mobile:text-sm text-gray3"
                                >平方研发生产基地</span
                            >
                        </p>
                        <p
                            class="border-b border-1 flex mobile:block py-6 mobile:py-1 mobile:flex-auto"
                        >
                            <span
                                class="w-full font-bold inline-block text-dominant mobile:block text-5xl mobile:text-3xl"
                                >{{ data?.num2 }}+</span
                            ><span
                                class="w-full text-[32px] mobile:text-sm text-gray3"
                                >技术解决方案</span
                            >
                        </p>
                        <p
                            class="flex mobile:block py-6 mobile:py-1 mobile:flex-auto"
                        >
                            <span
                                class="w-full font-bold inline-block text-dominant mobile:block text-5xl mobile:text-3xl"
                                >{{ data?.num3 }}+</span
                            ><span
                                class="w-full text-[32px] mobile:text-sm text-gray3"
                                >研发专利</span
                            >
                        </p>
                    </div>
                    <div
                        class="w-full rounded-3xl hidden mb-6 mobile:flex-auto mobile:w-full self-center float-right mobile:block"
                    >
                        <img
                            class="w-full"
                            src="/src/assets/Rectangle_36.jpg"
                        />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped></style>
